{% extends "base.html" %}

{% block title %}信访台账详情{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-xl font-semibold text-slate-800">信访台账详情</h2>
            <p class="text-slate-600 mt-1">查看信访记录的详细信息和各种分析结果</p>
        </div>
        <div class="flex space-x-3">
            <button id="backBtn" class="px-4 py-2 border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>返回列表
            </button>
            <button id="exportDetailBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                <i class="fas fa-download mr-2"></i>导出详情
            </button>
        </div>
    </div>

    <!-- 基础信息卡片 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <div class="mb-4">
            <h3 class="text-lg font-semibold text-slate-800">基础信息</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">信访编号</label>
                    <p class="text-lg font-semibold text-slate-900" id="petitionId">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">信访人</label>
                    <p class="text-lg text-slate-900" id="petitioner">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">登记时间</label>
                    <p class="text-lg text-slate-900" id="registrationTime">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">问题属地</label>
                    <p class="text-lg text-slate-900" id="region">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">地市</label>
                    <p class="text-lg text-slate-900" id="city">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">区县市</label>
                    <p class="text-lg text-slate-900" id="district">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">乡镇街道</label>
                    <p class="text-lg text-slate-900" id="street">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">去向单位</label>
                    <p class="text-lg text-slate-900" id="targetUnit">-</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">创建时间</label>
                    <p class="text-lg text-slate-900" id="createdAt">-</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 标签页导航 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200">
        <div class="border-b border-slate-200">
            <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                <button class="tab-button active border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                        data-tab="content">
                    投诉内容
                </button>
                <button class="tab-button border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                        data-tab="regional">
                    区域分析
                </button>
                <button class="tab-button border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                        data-tab="complaint-type">
                    投诉类型
                </button>
                <button class="tab-button border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                        data-tab="sentiment">
                    情感分析
                </button>
                <button class="tab-button border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                        data-tab="compliance">
                    规范性分析
                </button>
                <button class="tab-button border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                        data-tab="duplicate">
                    重复分析
                </button>
                <button class="tab-button border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
                        data-tab="map">
                    地图位置
                </button>
            </nav>
        </div>

        <!-- 标签页内容 -->
        <div class="p-6">
            <!-- 投诉内容标签页 -->
            <div id="content-tab" class="tab-content">
                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">投诉内容</h3>
                        <div class="bg-slate-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="complaintContent">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">概况</h3>
                        <div class="bg-slate-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="complaintSummary">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">答复内容</h3>
                        <div class="bg-green-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="responseContent">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">备注</h3>
                        <div class="bg-yellow-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="remarks">-</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 区域分析标签页 -->
            <div id="regional-tab" class="tab-content hidden">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-4">区域分析结果</h3>
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-md">
                                <label class="block text-sm font-medium text-slate-700 mb-1">问题属地</label>
                                <p class="text-lg font-semibold text-blue-900" id="analysisRegion">-</p>
                            </div>
                            <div class="bg-green-50 p-4 rounded-md">
                                <label class="block text-sm font-medium text-slate-700 mb-1">地市</label>
                                <p class="text-lg font-semibold text-green-900" id="analysisCity">-</p>
                            </div>
                            <div class="bg-yellow-50 p-4 rounded-md">
                                <label class="block text-sm font-medium text-slate-700 mb-1">区县市</label>
                                <p class="text-lg font-semibold text-yellow-900" id="analysisDistrict">-</p>
                            </div>
                            <div class="bg-purple-50 p-4 rounded-md">
                                <label class="block text-sm font-medium text-slate-700 mb-1">乡镇街道</label>
                                <p class="text-lg font-semibold text-purple-900" id="analysisStreet">-</p>
                            </div>
                            <div class="bg-pink-50 p-4 rounded-md">
                                <label class="block text-sm font-medium text-slate-700 mb-1">详细地址</label>
                                <p class="text-lg font-semibold text-pink-900" id="analysisAddress">-</p>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-4">经纬度信息</h3>
                        <div class="space-y-4">
                            <div class="bg-indigo-50 p-4 rounded-md">
                                <label class="block text-sm font-medium text-slate-700 mb-1">纬度</label>
                                <p class="text-lg font-semibold text-indigo-900" id="latitude">-</p>
                            </div>
                            <div class="bg-teal-50 p-4 rounded-md">
                                <label class="block text-sm font-medium text-slate-700 mb-1">经度</label>
                                <p class="text-lg font-semibold text-teal-900" id="longitude">-</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 投诉类型标签页 -->
            <div id="complaint-type-tab" class="tab-content hidden">
                <div class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-red-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">一级分类</label>
                            <p class="text-lg font-semibold text-red-900" id="primaryType">-</p>
                        </div>
                        <div class="bg-orange-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">二级分类</label>
                            <p class="text-lg font-semibold text-orange-900" id="secondaryType">-</p>
                        </div>
                        <div class="bg-yellow-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">三级分类</label>
                            <p class="text-lg font-semibold text-yellow-900" id="tertiaryType">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">分类说明</h3>
                        <div class="bg-slate-50 p-4 rounded-md">
                            <p class="text-slate-700" id="typeDescription">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">分类关键词</h3>
                        <div class="flex flex-wrap gap-2" id="typeKeywords">
                            <!-- 关键词标签将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">分类图表</h3>
                        <div class="bg-slate-50 p-4 rounded-md">
                            <div id="complaintTypeChart" class="h-64">
                                <!-- 图表将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 情感分析标签页 -->
            <div id="sentiment-tab" class="tab-content hidden">
                <div class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-blue-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">情感类型</label>
                            <p class="text-lg font-semibold text-blue-900" id="sentimentType">-</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">情感状态</label>
                            <p class="text-lg font-semibold text-green-900" id="sentimentStatus">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">情感摘要</h3>
                        <div class="bg-slate-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="sentimentSummary">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">情感关键词</h3>
                        <div class="flex flex-wrap gap-2" id="sentimentKeywords">
                            <!-- 关键词标签将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 规范性分析标签页 -->
            <div id="compliance-tab" class="tab-content hidden">
                <div class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-purple-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">合规状态</label>
                            <p class="text-lg font-semibold text-purple-900" id="complianceStatus">-</p>
                        </div>
                        <div class="bg-pink-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">合规评分</label>
                            <p class="text-lg font-semibold text-pink-900" id="complianceScore">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">合规分析摘要</h3>
                        <div class="bg-slate-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="complianceSummary">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">合规建议</h3>
                        <div class="bg-blue-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="complianceRecommendations">-</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 重复分析标签页 -->
            <div id="duplicate-tab" class="tab-content hidden">
                <div class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-yellow-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">重复状态</label>
                            <p class="text-lg font-semibold text-yellow-900" id="duplicateStatus">-</p>
                        </div>
                        <div class="bg-red-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">重复次数</label>
                            <p class="text-lg font-semibold text-red-900" id="duplicateCount">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">重复分析摘要</h3>
                        <div class="bg-slate-50 p-4 rounded-md">
                            <p class="text-slate-700 whitespace-pre-wrap" id="duplicateSummary">-</p>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-slate-900 mb-2">相似信访记录</h3>
                        <div class="bg-orange-50 p-4 rounded-md">
                            <div id="similarRecords">
                                <!-- 相似记录将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 地图位置标签页 -->
            <div id="map-tab" class="tab-content hidden">
                <div class="space-y-6">
                    <div class="bg-slate-50 p-4 rounded-md">
                        <h3 class="text-lg font-medium text-slate-900 mb-4">地理位置</h3>
                        <div id="map" class="h-96 bg-gray-200 rounded-md flex items-center justify-center">
                            <div class="text-center">
                                <i class="fas fa-map-marker-alt text-4xl text-gray-400 mb-2"></i>
                                <p class="text-gray-500">地图加载中...</p>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-blue-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">完整地址</label>
                            <p class="text-slate-700" id="fullAddress">-</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-md">
                            <label class="block text-sm font-medium text-slate-700 mb-1">坐标信息</label>
                            <p class="text-slate-700" id="coordinateInfo">-</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 加载提示 -->
<div id="loadingOverlay" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center z-50">
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <div class="flex items-center">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <span class="ml-3 text-slate-700">加载中...</span>
        </div>
    </div>
</div>

<script src="/static/js/petition-ledger/petition-ledger-detail.js"></script>
{% endblock %}